import React, { Fragment } from 'react';
import styled from 'styled-components';


const SpinnerOverlay = styled.div`
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: ${props => props.fullScreen ? 'fixed' : 'absolute' };
  background: ${props => props.overlay ? 'rgba(10,10,10,0.26)' : 'transparent'} !important;
  opacity: ${props => props.overlay ? '0.25' : '0'} !important;
  z-index: 1042;
`;


export const IconWrapper = styled('div')`
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 200px;
    margin: auto;
    padding: 40px;
    border-radius: 50%;
    background: ${p => p.theme.colors.secondaryBgOpacity};
    
    .svg-spin-icon {
      fill: ${p => p.theme.colors.text};
    }
    
    p {
      color: ${p => p.theme.colors.text};
    }
`;

export const Spinner = (props) => {
  if (!props.show) return null;

  return (
    <Fragment>
      <SpinnerOverlay fullScreen={props.fullScreen} overlay={props.overlay}/>
      <IconWrapper>
        <svg
          id="Layer_1"
          x="0px"
          y="0px"
          viewBox="0 0 150 150"
          style={{ enableBackground: 'new 0 0 150 150' }}
        >
          <path className="svg-spin-icon" d="M74.9,14.8c-12.2,0-24.3,0-36.5,0c-2.4,0-3.9-1-4.8-3.1c-1.3-3-1.2-6,0.6-8.9c0.8-1.3,2-2,3.5-2
	c1.1,0,2.3,0,3.4,0c23.3,0,46.7,0,70-0.1c3.9,0,5.3,1.9,6,4.7c0.5,2.1,0.4,4.2-0.5,6.3c-0.9,2.2-2.5,3.1-4.8,3c-2.9,0-5.7,0-8.6,0
	C93.9,14.8,84.4,14.8,74.9,14.8z"/>
          <path className="svg-spin-icon" d="M75.1,118.1c12,0,24,0,35.9,0c4,0,5.9,1.7,6.3,5.7c0.1,1.4,0,2.9-0.3,4.2c-0.7,2.9-2.4,4.1-5.3,4.1
	c-24.1,0-48.3,0-72.4,0c-3.7,0-5.4-1.2-6.3-5.3c-0.4-2-0.1-3.9,0.7-5.7c0.9-2,2.4-3.1,4.7-3C50.6,118.1,62.9,118.1,75.1,118.1z"/>
          <path className="svg-spin-icon" d="M75.3,76.3c0.2,0.4,3.1,9.3,7.2,14.1c3.9,4.7,8.9,8.5,13,12.5c3.2,3.2,5.4,7,6.8,11.2c0.5,1.6,0.3,1.9-1.4,1.9
	c-17.3,0-34.5,0-51.8,0c-1.7,0-1.9-0.2-1.3-1.8c1.8-5.5,5.2-10,9.4-13.9c3.5-3.3,7.7-6.1,10.6-9.9c3.5-4.7,6.8-13.3,7.1-14.1
	C75.1,76.3,75.2,76.3,75.3,76.3z"/>
          <path className="svg-spin-icon" d="M45.5,23.6c0,3.8-0.1,7.6,1.2,11.3c1,2.9,2.8,5.2,4.9,7.3c5,5.3,10.2,10.5,15.2,15.8c1.1,1.2,2,2.6,3.1,3.9
	c2,2.5,2.2,7.6-0.2,10.5c-1.8,2.2-3.6,4.3-5.5,6.4C59.5,84,54.7,89.1,50,94.2c-3.1,3.4-4.4,7.5-4.5,12c0,2.8-0.1,5.6,0,8.4
	c0,1-0.3,1.4-1.4,1.4c-1.7,0-2.3,0-3.7,0c-0.9,0-1.3-0.4-1.3-1.3c0-5-0.3-10,0.8-14.9c0.8-3.5,2.5-6.6,4.8-9.3
	c3.6-4.2,7.5-8.2,11.3-12.3c1.7-1.8,3.3-3.7,4.9-5.5c0.9-1,1.9-2,2.7-3c1.8-2.3,1.6-4.3-0.4-6.4c-5.2-5.4-10.4-11-15.8-16.3
	c-5.7-5.7-8.4-12.4-8.3-20.4c0-2.9,0-5.7,0-8.6c0-1.1,0.4-1.6,1.5-1.5c1.3,0,2.6,0,3.8,0c0.8,0,1.1,0.3,1.1,1.2
	C45.5,19.8,45.5,21.7,45.5,23.6z"/>
          <path className="svg-spin-icon" d="M109.9,35.9c-0.6,2.7-2.1,5.3-3.9,7.5c-3.5,4.2-7.5,8.1-11.2,12.1c-3,3.2-5.9,6.5-8.8,9.7
	c-0.9,1-0.9,2.1-0.2,3.1c1.2,1.7,2.5,3.3,3.8,4.8c1.5,1.8,3,3.6,4.6,5.3c3.4,3.6,6.8,7.1,10.1,10.7c4.7,5.1,6.8,11.2,6.9,18.1
	c0,2.4,0,5,0,7.5c0,1.3-0.3,1.5-1.6,1.5c-1.3,0-2.1,0-3.3,0c-1.1,0-1.5-0.4-1.5-1.5c0-3.4-0.2-6.7-0.3-10.1
	c-0.1-4.1-1.9-7.5-4.5-10.5c-3.3-3.8-6.8-7.4-10.2-11.1c-3.3-3.5-6.9-6.6-9.3-10.8c-0.8-1.5-1.4-3.2-1.7-4.9c-0.4-2.1,0.7-4,1.9-5.5
	c3.1-3.8,6.5-7.4,9.8-11.1c2.9-3.2,6-6.2,9-9.3c3.5-3.6,5.1-8,5.2-13c0-3.4,0.1-6.7,0.1-10.1c0-1.1,0.3-1.5,1.3-1.4
	c1.2,0,2.4,0,3.6,0c1.2,0,1.6,0.5,1.6,1.6c-0.1,1.6,0,3.1,0,4.7C111.4,23,110.9,31.7,109.9,35.9z"/>
          <path className="svg-spin-icon" d="M74.8,67.9c-0.2-1.3-1.1-5.7-1.5-7C71.4,54,59.7,44.3,54.3,39c-0.7-0.7-1.3-1.5-1.8-2.5
	c7.1,3.4,14.4,6.1,22.6,6.1c8.2,0,15.5-2.6,22.4-6.2c0.1,0.1,0.2,0.2,0.3,0.3c-0.5,0.6-0.9,1.2-1.4,1.8c-4.5,4.5-18.7,15.5-20,22.4
	c-0.2,0.8-1,6.2-1.2,7C75.1,67.9,75,67.9,74.8,67.9z"/>
          <g>
</g>
</svg>
        <p style={{ textAlign: 'center' }}>{props.label}</p>
      </IconWrapper>
    </Fragment>
  )
}